<template>
    <div class="coach-summary">
        <div class="coach-data">
            <img src="http://b-ssl.duitang.com/uploads/item/201602/19/20160219161118_5UYCG.jpeg" alt="" srcset="">
            <div class="coach-info">
                <p class="coach-name">{{coachInfo.realName}}</p>
                <div class="coach-msg-list">
                    <div class="item">
                        <p><i-icon :size="18" type="businesscard_fill"></i-icon><span class="icon-text">{{coachInfo.courseType}}</span></p>
                    </div>
                    <div class="item">
                        <p style="display: flex"><i class="icon iconfont icon-qiche"></i><span class="icon-text">{{coachInfo.carInfo}}</span></p>
                    </div>
                    <div class="item">
                        <p><i-icon :size="15" type="coordinates_fill" /><span class="icon-text">{{coachInfo.distance}}</span></p>
                    </div>
                </div>
                <div class="user-summary">
                    <span class="cocah-dir">5km内免费接送</span>
                </div>
            </div>
            
        </div>
        
    </div>
</template>

<script>
export default {
    props: {
        coachInfo: Object
    }
}
</script>

<style lang="stylus" scoped>
.coach-summary
    height: 136px;
    box-sizing border-box
    padding-left 24px
    padding-top 14px
    background-color: #3c4d6b;
    .coach-data
        display flex
        align-items center
        justify-content flex-start
        padding-right 60px
        img 
            width: 72px;
            height: 72px;
            border-radius 50%
            margin-right 12px
        .coach-info 
            display flex 
            flex 1 
            height: 72px;
            justify-content space-between 
            flex-direction column
            .coach-name
                font-size: 17px;
                font-weight: normal;
                color #ffffff
            .user-summary   
                color #7196ef !important
                font-size: 13px; 
            .coach-msg-list
                display flex  
                justify-content space-between 
                .item
                    color #7196ef !important
                    text-align center
                    font-size: 13px !important
                    .icon-qiche
                        position relative
                        top 2px
                    .icon-text
                        font-size: 13px
                        position relative
                        top 2px
                    .label
                        height: 11px; 
                        line-height: 1.73; 
                        color: #ffffff; 
                        .label-value
                            color #fca792
                            margin-top 8px
                            .unit
                                font-size: 11px;
                            .number
                                margin-left 2px
                                margin-right 2px
                                font-size: 16px;
                                font-weight: bold;
</style>
